<template>
    <section>
        <div class="head-notice" v-if="noticeForm && noticeForm.location == 'top' && isShowNotice">
            <svg-icon name="icon_notice" style="width: 20px;height: 20px;color: #0077FF;margin-right: 8px;" />
            {{ noticeForm.content }}

            <svg-icon @click="isShowNotice = false" name="icon_close"
                style="width: 12px;height: 12px;color: #333333;margin-left: auto;" />
        </div>

        <XsyModal v-model="open" :text="noticeForm.content"></XsyModal>

        <a-row :gutter="16">
            <a-col :span="16">
                <div class="card">
                    <div class="card-header">
                        <div class="head-text flex">
                            <div class="mr-16">
                                <span class="fz-18 col-223354 mr-8" style="font-weight: 600;">实例数量：</span>
                                <span class="fz-18 col-07F">{{ personalInfo?.instance?.total }}个</span>
                            </div>
                            <div v-if="personalInfo?.instance?.limit > 0">
                                <span class="fz-16 col-8A93A7 mr-8">实例额度：
                                    <QuestionCircleOutlined style="margin-left:auto;"
                                        @click="openDocs('/docs/help_document/manual/price/')" />
                                </span>
                                <span class="fz-18 col-07F">{{ personalInfo?.instance?.limit }}</span>
                            </div>
                        </div>

                        <a-dropdown :trigger="['click']" class="card-opt">
                            <template #overlay>
                                <a-menu @click="onClickMenu">
                                    <a-menu-item key="communityCloud">
                                        <a-button type="link">社区云</a-button>
                                    </a-menu-item>
                                    <a-menu-item key="highlyAvailableCloud">
                                        <a-button type="link">高可用云</a-button>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button type="primary" style="display: flex;align-items: center;">
                                <template #icon>
                                    <svg-icon name="icon_add" style="width:16px;height:16px;margin-right: 6px;" />
                                </template>
                                创建实例
                            </a-button>
                        </a-dropdown>
                    </div>
                    <div class="card-content">
                        <div class="instances-wrap">
                            <div class="instance-list">
                                <div class="list-top">
                                    <img src="@/assets/img/console/icon_to_number.png" alt="">
                                    <div>按量计费实例</div>

                                </div>
                                <div class="list-bottom">
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">运行中</div>
                                        <div>{{ personalInfo?.instance?.payg?.running || 0 }}</div>
                                    </div>
                                    <div class="line"></div>
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">已关机</div>
                                        <div>{{ personalInfo?.instance?.payg?.pause || 0 }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="instance-list">
                                <div class="list-top">
                                    <img src="@/assets/img/console/icon_m_sub.png" alt="">
                                    <div>包周包月实例</div>

                                </div>
                                <div class="list-bottom">
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">运行中</div>
                                        <div>{{ personalInfo?.instance?.day?.running || 0 }}</div>
                                    </div>
                                    <div class="line"></div>
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">已关机</div>
                                        <div>{{ personalInfo?.instance?.day?.pause || 0 }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="instance-list">
                                <div class="list-top">
                                    <img src="@/assets/img/console/icon_competitive_price.png" alt="">
                                    <div>竞价实例</div>

                                </div>
                                <div class="list-bottom">
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">运行中</div>
                                        <div>{{ personalInfo?.instance?.bidding?.running || 0 }}</div>
                                    </div>
                                    <div class="line"></div>
                                    <div class="bot-info">
                                        <div class="item-txt mb-16">已关机</div>
                                        <div>{{ personalInfo?.instance?.bidding?.pause || 0 }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="instance-bottom-list">
                            <div class="list-lf">
                                <div>云监控</div>
                            </div>
                            <div class="list-rg">
                                <div class="bot-info">
                                    <div class="item-txt">即将到期</div>
                                    <div class="ml-8 fz-16">{{ personalInfo?.instance?.monitor?.expiringSoon || 0
                                    }}</div>
                                </div>
                                <div class="line"></div>
                                <div class="bot-info">
                                    <div class="item-txt">磁盘预警</div>
                                    <div class="ml-8 fz-16">{{ personalInfo?.instance?.monitor?.diskAlert || 0 }}
                                    </div>
                                </div>
                                <div class="line"></div>
                                <div class="bot-info">
                                    <div class="item-txt">实例异常</div>
                                    <div class="ml-8 fz-16">{{ personalInfo?.instance?.monitor?.diskAlert || 0 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" style="margin-bottom:12px;">
                        <span class="card-title">数据存储</span>
                    </div>
                    <div class="fz-16 col-223354 mb-24">当前存储总费用：<span class="col-223354">￥<span class="col-money">{{
                        totalStoragePrice()
                    }}</span>/小时</span></div>
                    <div class="card-content">
                        <div class="ram-wrap" style="margin-bottom: 80px;">
                            <div class="instance-storage">
                                <div class="title">
                                    <span>实例存储（GB）</span>
                                    <a-tooltip placement="top" title="按量付费存储费用，不包含预付费实例镜像存储">
                                        <QuestionCircleOutlined style="margin:0 8px 0 4px;color: #D7D9DD;" />
                                    </a-tooltip>
                                </div>
                                <div class="instance-storage-con">
                                    <div class="instance-storage-info">
                                        <div class="item-txt mb-8">开机费用: <span class="normal-txt">￥ <span
                                                    class="col-money">{{
                                                        formatInstanceOpenFee() }}</span>/小时</span></div>
                                        <div class="item-txt mb-8">实例数量: <span class="normal-txt mr-16">{{
                                            personalInfo?.instance?.payg?.running + personalInfo?.instance?.day?.running
                                            + personalInfo?.instance?.bidding?.running }} 个 </span> 共<span
                                                class="normal-txt">{{
                                                    printSize(personalInfo?.data?.runningInstanceStorageSize) }}</span></div>
                                    </div>
                                    <div class="line"></div>
                                    <div class="instance-storage-info" style="padding-left: 44px;">
                                        <div class="item-txt mb-8">关机费用: <span class="normal-txt">￥ <span
                                                    class="col-money">{{
                                                        formatInstanceCloseFee() }}</span>/小时</span></div>
                                        <div class="item-txt mb-8">实例数量: <span class="normal-txt mr-16">{{
                                            personalInfo?.instance?.payg?.pause + personalInfo?.instance?.day?.pause
                                            + personalInfo?.instance?.bidding?.pause }}个</span> 共 <span
                                                class="normal-txt">{{
                                                    printSize(personalInfo?.data?.stopInstanceStorageSize) }} </span></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ram-wrap">
                            <div class="cloud-storage">
                                <div class="cloud-storage-header">
                                    <div class="title">网盘存储（GB）</div>
                                    <a-button type="link" @click="router.push('/storage')">查看详情</a-button>
                                </div>

                                <div class="cloud-storage-info">
                                    <div class="item-txt mr-8 mb-8">费用 <span class="normal-txt">￥ <span class="col-money">{{
                                        formatStorageFee()
                                    }}</span>/小时</span></div>
                                </div>
                                <div class="normal-txt"> 共{{ printSize(personalInfo?.data?.netDiskStorageSize) }}</div>
                            </div>
                            <div class="line"></div>
                            <div class="cloud-storage" style="padding-left: 44px;">
                                <div class="cloud-storage-header">
                                    <div class="title">镜像存储（GB）</div>
                                    <a-button type="link" @click="router.push('/gpuImage')">查看详情</a-button>
                                </div>

                                <div class="cloud-storage-info">
                                    <div class="item-txt mr-8 mb-8">费用 <span class="normal-txt">￥ <span class="col-money">{{
                                        formatImageFee()
                                    }}</span>/小时</span></div>
                                </div>
                                <div class="normal-txt"> 共{{ printSize(personalInfo?.data?.imageStorageSize) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">常见问题</span>
                        <a-button type="link" class="card-opt" @click="openDocs('/docs/category/常见问题/')">更多</a-button>
                    </div>
                    <div class="card-content">
                        <div class="mb-8" v-for="item in problemList">
                            <span class="fz-14 col-646F87" style="cursor: pointer;" @click="openDocs(item.path)">{{
                                item.title }}</span>
                        </div>

                    </div>
                </div>
            </a-col>
            <a-col :span="8">
                <div class="card">
                    <div class="user-card-content">
                        <div class="mb-8 user-info">
                            <span class="col-223354 fz-14" v-if="!canEdit">{{ personalInfo?.userItem?.nickname }}</span>
                            <a-input v-if="canEdit" v-model:value="form.nickname" style="width: 180px;"
                                @blur="changeNickName" :maxlength="10"></a-input>

                            <svg-icon name="icon_edit" style="width: 16px;height: 16px;margin-left: 5px;" class="mr-24"
                                @click="canEdit = true"></svg-icon>
                            <svg-icon v-if="personalInfo?.userItem?.memberLevel > 0" name="icon_member" class="member-icon"
                                @click="router.push('/memberBenefits')" />
                            <svg-icon v-else name="icon_ordinary" class="member-icon"
                                @click="router.push('/memberBenefits')" />
                        </div>
                        <div class="fz-14 mb-8 col-8A93A7">ID: {{ personalInfo?.userItem?.userId }}</div>
                        <!-- 已实名 -->
                        <div class="info-status audited" v-if="userInfo?.userItem?.idAuth">
                            <check-circle-filled style="font-size: 12px;" />
                            <span>已实名</span>
                        </div>
                        <!-- 未实名 -->
                        <div class="info-status no-audit" @click="handleNameAuth"
                            v-if="!userInfo?.userItem?.idAuth && (!userInfo?.userAuthApply || userInfo?.userAuthApply?.audit_status == 4)">
                            <svg-icon name="icon_info" style="width:12px;height:12px;margin-right: 4px;color: #FF3D00;" />
                            <span>未实名</span>
                        </div>
                        <!-- 实名认证中 -->
                        <div class="info-status auditing"
                            v-if="!userInfo?.userItem?.idAuth && (userInfo?.userAuthApply?.audit_status && userInfo?.userAuthApply?.audit_status !== 4)">
                            <svg-icon name="icon_info" style="width:12px;height:12px;margin-right: 4px;color: #FF3D00;" />
                            <span>实名认证中</span>
                        </div>
                        <div class="contact-type">
                            <svg-icon v-if="personalInfo?.userItem?.email" name="icon_email" class="contact-icon" />
                            <svg-icon @click="goAuth('emailAuth')" v-if="!personalInfo?.userItem?.email"
                                name="icon_email_noauth" class="contact-icon" />
                            <svg-icon v-if="personalInfo?.userItem?.isBindWechat" name="icon_wechat" class="contact-icon" />
                            <svg-icon @click="goAuth('wxAuth')" v-if="!(personalInfo?.userItem?.isBindWechat)"
                                name="icon_wechat_noauth" class="contact-icon" />
                            <svg-icon name="icon_phone" class="contact-icon" />
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">费用概况</span>
                        <a-button type="link" class="card-opt" @click="router.push('/costCenter')">查看</a-button>
                    </div>
                    <div class="card-content">
                        <div class="card-con-list">
                            <div>
                                <div class="item-txt mb-8">余额 </div>
                                <div class="col-223354">￥{{ personalInfo?.userAccount?.balance }}</div>
                                <a-button type="primary" @click="router.push('/recharge')">充值</a-button>
                            </div>
                            <div style="text-align: right;">
                                <div class="item-txt mb-8">代金券</div>
                                <div @click="router.push('/voucher')"><span>￥{{
                                    personalInfo?.userAccount?.userTicket?.amount || 0 }}</span><span
                                        style="color: #0077FF;">（{{
                                            personalInfo?.userAccount?.userTicket?.count || 0 }}张）</span></div>
                            </div>
                        </div>

                        <a-space class="mb-16">
                            <BalanceWaring />
                        </a-space>

                        <div class="card-con-list">
                            <div class="item-txt">
                                <a-button type="text"
                                    @click="router.push({ path: '/costDetail', query: { type: 2 } })">我的订单</a-button>
                                <RightOutlined />
                            </div>
                            <div class="item-txt">
                                <a-button type="text"
                                    @click="router.push({ path: '/costDetail', query: { type: 3 } })">我的账单</a-button>
                                <RightOutlined />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">邀客有礼</span>
                        <a-button type="link" class="card-opt" @click="router.push('/promotionBenefits')">查看</a-button>
                    </div>
                    <div class="card-content">
                        <div class="card-con-list">
                            <div class="item-txt">我的邀客礼金： {{ personalInfo?.userInvite?.inviteAmount || 0 }} 元 </div>
                            <a-button type="link" @click="onCopy()">复制链接</a-button>
                        </div>
                        <div class="card-con-list" v-if="personalInfo?.userInvite?.inviteList?.length">
                            <div class="fz-14" v-for="item in personalInfo?.userInvite?.inviteList">本周{{ item.name }}获得礼金{{
                                item.inviteAmount }}</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">通知中心</span>
                        <a-button type="link" class="card-opt" @click="router.push('/messageCenter')">查看</a-button>
                    </div>
                    <div class="card-content fz-14 col-646F87">
                        <div v-for="item in tableList" class="mb-8">
                            <div><span @click="handleView(item.id)" style="cursor: pointer;">【通知】{{ item.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span class="card-title">联系我们</span>
                    </div>
                    <div class="card-content">
                        <div class="contact-us">
                            <div class="qrcode-wrap">
                                <img src="@/assets/img/console/customer-service.png" alt="">
                                <p>客服咨询</p>
                            </div>

                            <div class="qrcode-wrap">
                                <img src="@/assets/img/console/wechat.png" alt="">
                                <p>关注领福利</p>
                            </div>
                        </div>

                    </div>
                </div>
            </a-col>
        </a-row>

        <GpuDrawer v-model="docVisible" v-if="docVisible" :url="docurl"></GpuDrawer>

        <XsyDialog v-model="showDialog" />

        <!-- 实名认证 -->
        <NameAuth v-model="nameAuthVisible" v-if="nameAuthVisible" />
    </section>
</template>

<script setup name="PersonalSpace">
import { ref } from 'vue'
import clipboard3 from "vue-clipboard3";
import {
    QuestionCircleOutlined,
    RightOutlined,
    CheckCircleFilled
} from '@ant-design/icons-vue';
import { printSize } from '@/libs/util.common'
import { updateUserInfo } from 'api/modules/api.account'
import { useRouter } from 'vue-router'
import { ZyNotification, XsyMessage } from '@/libs/util.toast'
import BalanceWaring from '@/components/common/BalanceWaring.vue';
import XsyDialog from '@/components/common/XsyDialog.vue';
import XsyModal from '@/components/common/XsyModal.vue';
import NameAuth from '@/views/console/account/components/NameAuthAudit.vue'
import { getNoticeListApi } from "@/api/modules/api.messages";
import { useNotice } from "@/hooks/sys/useNotice";
import { getMessageListApi } from 'api/modules/api.messages'
import dbUtils from "libs/util.strotage";
import { storeToRefs } from 'pinia'
import userInfoStore from '@/stores/userInfo.js'
const useUserInfoStore = userInfoStore()
const { userInfo } = storeToRefs(useUserInfoStore);

const {
    getNoticeList
} = useNotice(getNoticeListApi, showCb)

getNoticeList('control')
const isShowNotice = ref(true)

const router = useRouter()
const open = ref(false)

//  新注册用户弹出一封信
const showDialog = ref(false)
if (dbUtils.get('showLetter')) {
    showDialog.value = true
}

// 编辑用户用
const canEdit = ref(false) // 是否可编辑
const form = ref({})
const changeNickName = () => {
    if (!form.value.nickname) {
        canEdit.value = false
        return
    }
    updateUserInfo(form.value).then(res => {
        if (res.code == 0) {
            ZyNotification.success('修改成功')
            getUserInfo()
            canEdit.value = false
        }
    })
}

// 复制功能
const { toClipboard } = clipboard3();

// 获取个人用户信息
const invitationLink = ref('')
const personalInfo = ref({})
const getUserInfo = () => {
    userInfoStore().getProfileInfo().then(res => {
        
        personalInfo.value = res.data
        form.value.nickname = res.data?.userItem?.nickname
        const str = `user=${encodeURIComponent("好友")}&invitedUserId=${personalInfo.value?.userItem?.userId}&source=invited`
        invitationLink.value = window.location.origin + '/login?' + str
    })
};

const onCopy = async () => {
    try {
        await toClipboard(invitationLink.value);
        XsyMessage.success("复制成功");
    } catch (e) {
        console.error(e);
    }
}

const onClickMenu = e => {
    router.push('/' + e.key)
};

getUserInfo()

const totalStoragePrice = () => {
    const runningInstanceStorageFee = parseFloat(personalInfo.value?.data?.runningInstanceStoragePrice) * printGBSize(personalInfo.value?.data?.runningInstanceStorageSize)
    const stopInstanceStorageFee = parseFloat(personalInfo.value?.data?.stopInstanceStoragePrice) * printGBSize(personalInfo.value?.data?.stopInstanceStorageSize)
    const netDiskStorageFee = parseFloat(personalInfo.value?.data?.netDiskStoragePrice) * printGBSize(personalInfo.value?.data?.netDiskStorageSize)
    return (runningInstanceStorageFee + stopInstanceStorageFee + netDiskStorageFee) ? (runningInstanceStorageFee + stopInstanceStorageFee + netDiskStorageFee)?.toFixed(2) : 0
}

//  GB内存计算
const printGBSize = val => {
    const GB = 1024 * 1024 * 1024
    if (!val) {
        return 0
    }

    return `${(val / GB).toFixed(2)}`
}

// 通知消息
const noticeForm = ref({})
function showCb(notice) {
    noticeForm.value = notice
    if (notice.location == 'pop') {
        open.value = true
    }
}

// 获取站内信列表
const tableList = ref([])
const getList = () => {
    getMessageListApi(form.value).then(res => {
        if (res.code == 0 && res.data?.list?.length) {
            tableList.value = res.data.list.filter(item => {
                return item.status !== 0
            }).slice(0, 3)
        }
    })
};

getList()

// 查看详情
const handleView = (id) => {
    router.push({ path: '/messageDetails', query: { id } })
}


// 常见问题
const problemList = [
    { path: '/docs/help_document/faq/instance#实例计费模式可以变更吗', title: '实例计费模式可以变更吗？' },
    { path: '/docs/help_document/faq/storage#数据盘空间不足怎么办', title: '数据盘空间不足怎么办？' },
    { path: '/docs/help_document/faq/price#扣费的顺序是什么', title: '扣费的顺序是什么？' },
]

const docVisible = ref(false)
const docurl = ref('')
const openDocs = (path) => {
    docVisible.value = true
    docurl.value = window.location.origin + path
}

// 计算实例存储价格
const formatInstanceOpenFee = () => {
    let fee = ''
    fee = (personalInfo?.value?.data?.runningInstanceStoragePrice * printGBSize(personalInfo?.value?.data?.runningInstanceStorageSize)).toFixed(2)
    if (parseFloat(fee) > 0 && parseFloat(fee) < 0.01) {
        fee = 0.01
    }

    return fee
}

const formatInstanceCloseFee = () => {
    let fee = ''
    fee = (personalInfo?.value?.data?.stopInstanceStoragePrice * printGBSize(personalInfo?.value?.data?.stopInstanceStorageSize)).toFixed(2)
    if (parseFloat(fee) > 0 && parseFloat(fee) < 0.01) {
        fee = 0.01
    }

    return fee
}

// 计算网盘存储价格
const formatStorageFee = () => {
    let fee = ''
    fee = (personalInfo?.value?.data?.netDiskStoragePrice * printGBSize(personalInfo?.value?.data?.netDiskStorageSize)).toFixed(2)
    if (parseFloat(fee) > 0 && parseFloat(fee) < 0.01) {
        fee = 0.01
    }

    return fee
}

// 
const formatImageFee = () => {
    let fee = ''
    fee = (personalInfo?.value?.data?.imageStoragePrice * printGBSize(personalInfo?.value?.data?.imageStorageSize)).toFixed(2)
    if (parseFloat(fee) > 0 && parseFloat(fee) < 0.01) {
        fee = 0.01
    }

    return fee
}

// goAuth
const goAuth = (key) => {
    router.push({ path: '/account', query: { key } })
}

// 实名认证
const nameAuthVisible = ref(false)
const handleNameAuth = ()=> {
    nameAuthVisible.value = true
}

</script>

<style scoped lang="scss">
.head-notice {
    display: flex;
    align-items: center;
    color: #07F;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    padding: 10px 24px 10px 10px;
    margin-bottom: 16px;
    background: #DCE8F6;
    border: 1px solid #07F;
    border-radius: 4px;
}

.card {
    background: #fff;
    padding: 24px;
    margin-bottom: 15px;
    border-radius: 6px;

    .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .card-title {
            color: #223354;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-right: 20px;
        }

        .card-opt {
            margin-left: auto;
        }
    }

    .card-content {

        .contact-us {
            display: flex;

            .qrcode-wrap {
                margin-right: 48px;

                p {
                    color: #223354;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    text-align: center;
                }
            }
        }

        .instances-wrap {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;

            .instance-list {
                flex: 1;
                padding: 8px 16px 16px;
                margin: 0 12px;
                background: #F2F8FF;

                .list-top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;

                    img {
                        display: block;
                        width: 40px;
                        height: 40px;
                        margin-right: 16px;
                    }

                    div {
                        color: #223354;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: normal;
                    }
                }

                .list-bottom {
                    display: flex;

                    .bot-info {
                        text-align: center;
                        flex: 1;
                    }

                }
            }
        }

        .instance-bottom-list {
            width: 100%;
            display: flex;
            background: #F2F8FF;
            padding: 24px;

            .list-lf {
                display: flex;
                align-items: center;

                div {
                    color: #223354;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;
                    margin-right: 4px;
                }
            }

            .list-rg {
                display: flex;
                align-items: center;
                flex: 1;

                .bot-info {
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .item-txt {
                        color: #FF3838;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                    }

                }

                .line {
                    width: 1px;
                    height: 100%;
                    background: #ccc;
                }
            }

        }

        .line {
            height: auto;
            width: 1px;
            background: #ccc;
        }

        .item-txt {
            font-size: 14px;
            color: #8A93A7;
        }

        .normal-txt {
            color: #223354;
            font-size: 14px;
        }
    }

    .user-card-content {

        .user-info {
            display: flex;
            align-items: center;
        }

        .member-icon {
            width: 70px;
            height: 20px;
            cursor: pointer;
        }

        .info-status {
            display: inline-block;
            border-radius: 10px;
            font-size: 12px;
            padding: 0 8px;
            height: 20px;
            line-height: 20px;
            margin-bottom: 12px;
        }

        .audited {
            border: 1px solid rgba(83, 196, 27, 0.30);
            background: #F1FAED;
            color: #53C41B;
        }

        .no-audit {
            border: 1px solid #DEE2E8;
            background: #F6F8FA;
            color: #223354;
        }

        .auditing {
            border: 1px solid rgba(255, 61, 0, 0.18);
            background: rgba(255, 61, 0, 0.06);
            color: #FF3D00;
        }
    }

    .contact-type {
        display: flex;

        .contact-icon {
            width: 24px;
            height: 24px;
            margin-right: 24px;
        }
    }

    .ram-wrap {
        display: flex;

        .instance-storage {
            flex: 1;

            .title {
                font-weight: 550;
                color: #223354;
                margin-bottom: 20px;
                text-align: center;
                font-size: 16px;
            }

            .instance-storage-con {
                display: flex;

                .instance-storage-info {
                    flex: 1;
                    padding-left: 24px;
                }
            }
        }

        .cloud-storage {
            flex: 1;
            padding-left: 24px;

            .cloud-storage-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 24px;

                .title {
                    font-weight: 550;
                    color: #223354;

                    text-align: center;
                    font-size: 16px;
                }
            }

            .cloud-storage-info {
                display: flex;
            }

        }
    }

    .card-con-list {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}</style>
